<template>
	<view>
		<view class="seach-box" @click="backToSearch">
			<uni-icons type="search" size="20" color="#808080"></uni-icons>
			<text type="text"> {{context}} </text>
		</view>
		<view class="result">
				<text class="title" v-if="result.users.length > 0">相关用户</text>
				<view class="users" v-if="result.users.length > 0">
				<view class="item" v-for="item in result.users">
					<image :src="item.avatar" mode="heightFix"></image>
					<text>{{(item.nickname.length) < 5 ? item.nickname : (item.nickname).substr(0, 5) + '...'}}</text>
				</view>
			</view>
			<text class="title" v-if="result.tags.length > 0">相关标签</text>
			<view class="tags" v-if="result.tags.length > 0">
				<view class="item" v-for="item in result.tags">
					<text>{{item.title}}</text>
				</view>
			</view>
			<text class="title" v-if="result.products.length> 0">相关商品</text>
			<view class="products" v-if="result.products.length> 0">
				<view class="item" v-for="item in result.products">
					<image :src="item.img" mode="heightFix"></image>
					<view class="context">
						<text class="product-name">{{item.title}}</text>
						<text class="summary"> {{item.summary.length < 60 ? item.summary : item.summary.substr(0,59)+'...'}}</text>
<!-- 						<view class="like">
							<uni-icons type="heart" size="18" color="#ff8785"></uni-icons>
							<text>{{item.like}}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				context: '',
				result: {
					users: [{
						id: 1,
						nickname: 'cuteder',
						avatar: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210110143438.png'
					},
					{
						id: 2,
						nickname: '猪猪嘿哈aa',
						avatar: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210110144500.png'
					},
					{
						id: 3,
						nickname: 'Lisa',
						avatar: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210110144643.png'
					},
					{
						id: 4,
						nickname: 'Coisai',
						avatar: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210110144708.png'
					}],
					tags: [
						{
							id: 1,
							title: '中式西服'
						},
						{
							id: 1,
							title: '英式小礼裙'
						},
						{
							id: 1,
							title: '北欧风'
						},
						{
							id: 1,
							title: 'jk'
						},
						{
							id: 1,
							title: '制服'
						},
						{
							id: 1,
							title: '朋克'
						},
						{
							id: 1,
							title: '俄式'
						}
						
					],
					products: [{
						id: 1,
						title: 'MINNIE 手袋坠饰, 黑色, 镀金色调',
						img: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210106215101.png',
						summary: '这款雅致的耳环采用花卉图形设计，其灵感源自传统大吉葫芦瓶瓶身的装饰，红色密镶仿水晶散发着明亮的光泽。在精致的花卉设计中心，是一只以闪耀施华洛世奇锆石打造的品牌经典天鹅。该手链采用一半手链一半红绳的设计，十分百搭，它将会是装饰日常造型的绝佳之选。',
						like: 271
					},
					{
						id: 2,
						title: '日系白二本基础款正统JK制服软妹春秋长袖水手服',
						img: 'https://faraj-a01.oss-cn-beijing.aliyuncs.com/20210107152137.png',
						summary: '日系白二本基础款正统JK制服软妹春秋长袖水手服学生校服班服套装',
						like: 21
					}
					]
				}
			}
		},
		methods: {
			init() {

			},
			backToSearch() {
				uni.navigateBack({
					animationType: 'slide-out-right'
				})
			}
		},
		onLoad(opt) {
			this.context = opt.context
		}
	}
</script>

<style lang="scss">
	.seach-box {
		padding: 20rpx 0;
		display: flex;
		margin: 30rpx;
		flex-direction: row-reverse;
		justify-content: space-between;
		border-bottom: 3rpx solid #dfdfdf;
		align-items: center;

		text {
			color: $uni-text-color;
			font-weight: 600;
			font-size: $uni-font-size-lg;
		}
	}

	.result {
		margin: 30rpx;
		display: flex;
		flex-direction: column;

		.users {
			padding: 20rpx 10rpx;
			padding-bottom: 40rpx;
			border-bottom: 3rpx solid #dfdfdf;
			display: flex;
			flex-direction: row;
			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}
				text{
					padding-top: 10rpx;
					font-size: $uni-font-size-sm;
					color: #161412;
				}
			}

		}

		.tags {
			padding: 20rpx 10rpx;
			border-bottom: 3rpx solid #dfdfdf;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.item {
				padding: 5rpx 10rpx;
				border: $color1 1rpx solid;
				margin-right: 20rpx;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				text {
					color: $color1;
					font-size: $uni-font-size-sm;
				}
			}
		}

		.products {
			padding: 20rpx 10rpx;
			padding-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			.item {
				margin-bottom: 40rpx;
				display: flex;
				align-content: center;
				justify-content: center;
				flex-direction: row;
				image {
					margin-right: 20rpx;
					flex-shrink: 0;
					height: 200rpx;
					width: 200rpx;
				}
				.context {
					display: flex;
					flex-direction: column;
						.product-name {
							font-size: $uni-font-size-base;
							font-weight: 600;
						}
						.summary {
							padding: 20rpx 0;
							font-size: $uni-font-size-sm;
							color: $uni-text-color-placeholder
						}
						.like {
							color: $color2;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							font-size: $uni-font-size-sm;
							align-self: flex-end;
							text {
								padding-left: 10rpx;
							}
						}
				}
			}
		}

		.title {
			display: block;
			padding-top: 10rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-placeholder;
		}
	}
</style>
